<template>
  <div>
    <headerbar>驻村辅导</headerbar>
    <section class="frame-content-sub no-bg">
      <workVillageMenu></workVillageMenu>
      <ul class="tab">
        <li @click="newQa()" :class="{ active: tabIndex == 0 }">
          <span>最新问答</span>
        </li>
        <li @click="hotQa()" :class="{ active: tabIndex == 1 }">
          <span>热点问答</span>
        </li>
        <li v-if="false" @click="myQa()" :class="{ active: tabIndex == 2 }">
          <span>我的问答</span>
        </li>
      </ul>

      <div v-if="tabIndex == 0" id="newQa" class="mui-active">
        <div class="d-scroll list-wenda" style="">
          <cube-scroll
            ref="scroll"
            :options="options"
            @pulling-up="onPullingUp"
          >
            <cube-swipe>
              <transition-group name="swipe" tag="div">
                <div
                  class=""
                  v-for="(data, index) in swipeData"
                  :key="data.coachId"
                >
                  <cube-swipe-item ref="swipeItem" :index="index">
                    <div @click="goDetail(data)" class="item">
                      <div class="icon">
                        <span class="icon-text">问</span>
                      </div>
                      <div class="text-wrap">
                        <div class="title">
                          <span>{{ data.questionContext }}</span>
                        </div>
                        <div class="tip">
                          <span>层级：{{ getLevel(data.coachLevle) }}</span
                          ><span>部门：{{ data.depetName }}</span>
                        </div>
                        <div class="tip">
                          <span>辅导师：{{ data.coachTeacherName }}</span
                          ><span>{{ getTime(data.createTime) }}</span
                          ><span>点击：{{ data.clickNum }}</span>
                        </div>
                      </div>
                    </div>
                  </cube-swipe-item>
                </div>
              </transition-group>
            </cube-swipe>
            <!-- <div class="text-center no-data" v-if="swipeData.length === 0">
              <img src="../../../../static/images/no_data.png" alt="" />
              <p>暂无数据</p>
            </div> -->
            <!-- W noData -->
            <noData v-if="swipeData.length === 0"></noData>
            <onBottom v-else-if="onBottom"></onBottom>
          </cube-scroll>
        </div>
      </div>
      <div v-if="tabIndex == 1" id="hotQa" class="mui-active">
        <div class="d-scroll list-wenda" style="">
          <cube-scroll
            ref="scroll1"
            :options="launchOptions"
            @pulling-up="launchOnPullingUp"
          >
            <cube-swipe>
              <transition-group name="swipe" tag="div">
                <div
                  class=""
                  v-for="(data, index) in launchSwipeData"
                  :key="data.coachId"
                >
                  <cube-swipe-item ref="swipeItem" :index="index">
                    <div @click="goDetail(data)" class="item">
                      <div class="icon">
                        <span class="icon-text">问</span>
                      </div>
                      <div class="text-wrap">
                        <div class="title">
                          <span>{{ data.questionContext }}</span>
                        </div>
                        <div class="tip">
                          <span>层级：{{ getLevel(data.coachLevle) }}</span
                          ><span>部门：{{ data.depetName }}</span>
                        </div>
                        <div class="tip">
                          <span>辅导师：{{ data.coachTeacherName }}</span
                          ><span>{{ getTime(data.createTime) }}</span
                          ><span>点击：{{ data.clickNum }}</span>
                        </div>
                      </div>
                    </div>
                  </cube-swipe-item>
                </div>
              </transition-group>
            </cube-swipe>
            <!-- <div
              class="text-center no-data"
              v-if="launchSwipeData.length === 0"
            >
              <img src="../../../../static/images/no_data.png" alt="" />
              <p>暂无数据</p>
            </div> -->
            <!-- W noData -->
            <noData v-if="launchSwipeData.length === 0"></noData>
            <onBottom v-else-if="onBottom"></onBottom>
          </cube-scroll>
        </div>
      </div>
      <div v-if="tabIndex == 2" id="myQa" class="mui-active">
        <div class="d-scroll list-wenda" style="">
          <cube-scroll
            ref="scroll12"
            :options="myOptions"
            @pulling-up="myOnPullingUp"
          >
            <cube-swipe>
              <transition-group name="swipe" tag="div">
                <div
                  class=""
                  v-for="(data, index) in mySwipeData"
                  :key="data.coachId"
                >
                  <cube-swipe-item ref="swipeItem" :index="index">
                    <div @click="goMyQaDetail(data)" class="item">
                      <div class="icon">
                        <span class="icon-text">问</span>
                      </div>
                      <div class="text-wrap">
                        <div class="title">
                          <span>{{ data.questionContext }}</span>
                        </div>
                        <div class="tip">
                          <span>层级：{{ getLevel(data.coachLevle) }}</span
                          ><span>部门：{{ data.depetName }}</span>
                        </div>
                        <div class="tip">
                          <span>辅导师：{{ data.coachTeacherName }}</span
                          ><span>{{ getTime(data.createTime) }}</span
                          ><span>点击：{{ data.clickNum }}</span>
                        </div>
                      </div>
                    </div>
                  </cube-swipe-item>
                </div>
              </transition-group>
            </cube-swipe>
            <!-- <div class="text-center no-data" v-if="mySwipeData.length === 0">
              <img src="../../../../static/images/no_data.png" alt="" />
              <p>暂无数据</p>
            </div> -->
            <!-- W noData -->
            <noData v-if="mySwipeData.length === 0"></noData>
            <onBottom v-else-if="onBottom"></onBottom>
          </cube-scroll>
        </div>
      </div>
      <section class="foot-action">
        <div @click="goAdd()" class="default-block-btn mgh-10">提问</div>
      </section>
    </section>
  </div>
</template>

<script>
import tools from "@/utils/tools";
import api from "@/common/config/api";
import workVillageMenu from "@/components/common/workVillageMenu";
import loginService from "@/service/loginService";
import moment from "moment";
export default {
  components: { workVillageMenu },
  name: "tutoringVillage",
  data() {
    return {
      fn: tools,
      options: {
        pullUpLoad: true,
        scrollbar: false,
      },
      launchOptions: {
        pullUpLoad: true,
        scrollbar: false,
      },
      myOptions: {
        pullUpLoad: true,
        scrollbar: false,
      },
      onBottom: false, // W onBottom
      objectsName: "",
      swipeData: [],
      launchSwipeData: [],
      mySwipeData: [],
      infinite: true,
      pageIndex: 1,
      launchPageIndex: 1,
      myPageIndex: 1,
      tabIndex: 0,
    };
  },
  created() {
    this.newQa();
  },
  methods: {
    goDetail(data) {
      this.coachSuggestNum(data.coachId);
      this.$router.push({ path: `/tutoringVillageDetail/${data.coachId}` });
    },
    goMyQaDetail(data) {
      this.$router.push({ path: `/tutoringVillageMyQaDetail/${data.coachId}` });
    },
    goAdd() {
      this.$router.push({ path: "tutoringVillageAdd" });
    },
    newQa() {
      this.tabIndex = 0;
      let data = {
        page: this.pageIndex + "",
        limit: "20",
        queryType: "0",
      };
      loginService.coachSuggestList(data).then((res) => {
        if (res.code === 0 && res.data.length < 1) {
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          return tools.tip("已无更多数据");
        }
        this.pageIndex++;
        this.swipeData = this.swipeData.concat(res.data);
        setTimeout(() => {
          this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = false;
        }, 100);
      });
    },
    hotQa() {
      this.tabIndex = 1;
      let data = {
        page: this.launchPageIndex + "",
        limit: "20",
        queryType: "1",
      };
      loginService.coachSuggestList(data).then((res) => {
        if (res.code === 0 && res.data.length < 1) {
          this.$refs.scroll1.forceUpdate && this.$refs.scroll1.forceUpdate();
          return tools.tip("已无更多数据");
        }
        this.launchPageIndex++;
        this.launchSwipeData = this.launchSwipeData.concat(res.data);
        setTimeout(() => {
          this.$refs.scroll1.forceUpdate &&
            this.$refs.scroll1.forceUpdate(true, false);
          this.launchOptions.isPullUpLoad = false;
        }, 100);
      });
    },
    myQa() {
      this.tabIndex = 2;
      let data = {
        page: this.myPageIndex + "",
        limit: "20",
      };
      loginService.coachSuggestListOwn(data).then((res) => {
        if (res.code === 0 && res.data.length < 1) {
          this.$refs.scroll2.forceUpdate && this.$refs.scroll2.forceUpdate();
          return tools.tip("已无更多数据");
        }
        this.myPageIndex++;
        this.mySwipeData = this.mySwipeData.concat(res.data);
        setTimeout(() => {
          this.$refs.scroll2.forceUpdate &&
            this.$refs.scroll2.forceUpdate(true, false);
          this.myOptions.isPullUpLoad = false;
        }, 100);
      });
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.newQa();
    },
    launchOnPullingUp() {
      console.log("launchOnPullingUp");
      this.hotQa();
    },
    myOnPullingUp() {
      console.log("launchOnPullingUp");
      this.myQa();
    },
    getLevel(level) {
      if (!level) {
        return "";
      }
      if (level === "0") {
        return "市级";
      } else {
        return "区级";
      }
    },
    getTime(createTime) {
      return moment(createTime).format("YYYY-MM-DD");
    },
    coachSuggestNum(id) {
      loginService.coachSuggestNum(id).then((res) => {});
    },
  },
};
</script>

<style scoped lang="">
</style>


